<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
            :disabled="disabled">
    </editor>
  </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/modern/theme'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/media'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/preview'
  import Api from '@/constants/Api'

  export default {
    components: {
      Editor
    },
    props: {
      // 传入一个value，使组件支持v-model绑定
      value: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default: 'lists image table textcolor contextmenu preview'
      },
      toolbar: {
        type: [String, Array],
        default: ' undo redo | fontsizeselect | forecolor |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists  table | removeformat preview |'
      }
    },
    data() {
      return {
        // 初始化配置
        init: {
          language_url: '/tinymce-4.9.2/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/tinymce-4.9.2/skins/lightgray',
          height: 300,
          plugins: this.plugins,
          toolbar: this.toolbar,
          branding: false,
          fontsize_formats: '12px 14px 16px 18px 20px 22px 24px', // 第二步
          // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
          images_upload_handler: (blobInfo, success, failure) => {
            this.handleImgUpload(blobInfo, success, failure)
          }
        },
        myValue: this.value
      }
    },
    mounted() {
      tinymce.init({})
    },
    methods: {
      getContent() {
        return this.myValue
      },
      setContent(val) {
        this.myValue = val
      },
      handleImgUpload(blobInfo, success, failure) {
        let formdata = new FormData()
        formdata.append('file', blobInfo.blob())
        let url = Api.fileUpload.replace('{bucketName}', 'img')
        const vm = this
        vm.$axios.post(url, formdata).then(res => {
          if (res.code === 20002) {
            success(vm.$global.baseUrl + res.data.filePath)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(res => {
          this.$message.error(res.data.msg)
          failure('error')
        })
      }
    },
    watch: {
      value(newValue) {
        this.myValue = this.removeStyle(newValue)
      },
      myValue(val) {
        this.$emit('input', this.removeStyle(val))
      }
    }
  }

</script>

<style type="text/scss" lang="scss" scoped>
  @import "~/common.scss";

  .tinymce-editor /deep/ .mce-panel {
    border: 0 solid $light-gray;
    box-shadow: none;
    overflow: hidden;
  }

  .tinymce-editor /deep/ .mce-menubar {
    border: 0 solid $light-gray;
    overflow: hidden;
  }
</style>
